ngStyle

ngStyle הוא Attribute directive. מה שאומר שהוא משנה את המראה או ההתנהגות של אלמנט html. הוא לא מוסיף אלמנטים ל-DOM.

אנחנו משתמשים ב-ngStyle על מנת להוסיף או להסיר class של css דינמית מאלמנט html על פי ערך של משתנה.

שימושים ל-ngStyle

דוגמאות לצורך ב-ngStyle:

1. עיצוב מסויים כאשר המשתמש בוחר ערכים ברשימה.
2. עיצוב שמזהה את הקישור הפעיל בתפריט.
3. עיצוב שמזהה תכונה של מוצר למשל מוצר חדש או במבצע.

דוגמא

נניח שיש לנו רשימה של מוצרים ואנחנו רוצים לציין את התווית "במלאי" בירוק ואת התווית "לא במלאי" באדום.

products.component.html

<table>
    <tr>
        <th>Name</th>
        <th>Price</th>
        <th>In Stock</th>
    </tr>

    <tr *ngFor="let product of products">
        <td>{{ product.name }}</td>
        <td>{{ product.price }}</td>
        <td [ngStyle]="{ color: product.instock === true ? 'green' : 'red' }">{{ product.instock }}</td>
    </tr>
</table>

אנחנו רוצים לחבר את ngStyle למשתנה ולכן יש מסביבו [].

בדוגמא אנחנו רוצים לשנות את הצבע של הטקסט לפי הזמינות של המוצר. נבדוק האם instock הוא true וניתן לטקסט צבע ירוק, אחרת הוא יהיה אדום.

ngStyle עם תנאים מרובים

נניח שיש לי הרבה תנאים לפיהם אני רוצה לשנות את העיצוב, איך אפשר לעשות את זה?

נגדיר את התנאים שלנו בתוך קובץ ה-ts. בדוגמא אנחנו רוצים לשנות את צבע השמות של האנשים על פי המדינה ממנה הגיעו.

component.ts

getColor(country) {
    switch (country) {
        case 'UK':
        return 'green';
        case 'USA':
        return 'blue';
        case 'HK':
        return 'red';
    }
}

אנחנו מקבלים את הערך הרצוי של הצבע לפי הערך של המדינה באובייקט.

component.html

<ul *ngFor="let person of people">
  <li [ngStyle]="{'color':getColor(person.country)}"> {{ person.name }} - {{ person.country }}</li>
</ul>

אפשר לפנות לערך של color עם syntax שונה, הפעולה תהיה זהה.

component.html

<ul *ngFor="let person of people">
  <li [style.color]="getColor(person.country)">{{ person.name }} - {{ person.country }}</li>
</ul>

מערך של הגדרות

אפשר להשתמש ב-ngStyle כדי לקבל מערך של הגדרות.

component.ts

prim-btn = true;
btn-important = true;

component.html

<p>Passing a configuration object:</p>
<button [ngClass]="{ 'btn': btn-important, 'btn-primary': prim-btn }">
    Button
</button>

שימוש בפונקציה להגדרת ngClass

לפעמים התנאים של ngClass הופכים עמוסים ומקשים על הקריאות של הקוד.

במקרה כזה אנחנו יכולים להשתמש בפונקציה על מנת לשלוח את ההגדרות.

component.html

<button (click)="toggleState()">Toggle State</button>

<p>Obtaining the CSS classes from the component method:</p>
<button [ngClass]="calculateClasses()" (click)="submit()">Button</button>

component.ts

export class AppComponent {

    stateFlag = false;

    toggleState() {
        this.stateFlag = !this.stateFlag;
    }

    submit() {
        console.log('Button submitted');
    }

    calculateClasses() {
        return {
            btn: true,
            'btn-primary': true,
            'btn-extra-class': this.stateFlag
        };
    }
}

מה קורה בקוד?

• stateFlag מזהה אם המצב של הקומפוננטה הוא פעיל או לא.
• הפונקציה calculateClasses נותנת לנו את ההגדרות של ה-css שאנחנו רוצים ומתייחסת למצב של הקומפוננטה.
• התוספת של btn-extra-class יהיה בהתאם למצב של stateFlag.